<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <router-link
      v-for="item in nearbyList"
      :key="item._id"
      :to="`/shop/${item._id}`"
    >
      <ShopInfo :item="item" />
    </router-link>
  </div>
</template>
<script>
import { ref } from '@vue/runtime-core'
import ShopInfo from '../../components/ShopInfo.vue'
import { getData } from '../../utils/http'

const useNearbyListEffect = () => {
  const nearbyList = ref([])
  const getList = async () => {
    const result = await getData()
    if (!result) {
      return []
    }
    nearbyList.value = result.data.data
    console.log(nearbyList.value)
  }
  return { nearbyList, getList }
}
export default {
  name: 'Neatby',
  components: {
    ShopInfo
  },
  setup () {
    const { nearbyList, getList } = useNearbyListEffect()
    getList()
    return {
      nearbyList
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriable.scss';
.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  // a {
  //   // router-link 实际就是在外层包裹一个 a 标签
  //   // 去掉 a 标签的下划线
  //   text-decoration: none;
  // }
}
</style>
